<template>
  <div class="g-app">
    <div class="message">message: {{ message }}</div>
    <hr>
    <!-- 动态绑定class的几种写法 -->
     <!-- 绑定多个class用对象语法和数组语法都可以 -->
    <div :class="{active: isActive, first: isFirst}"></div>
    <!-- 数组语法 数组中的每个元素可以是一个字符串、对象或数组。-->
    <div :class="[activeClass, errorClass]">{{ message }}</div>
    <!-- 绑定单个类名，用表达式语法更加简洁 -->
    <div :class="isActive && 'active'"></div>
    <hr>
    <!-- v-once之后，数据改动也不会引起视图变化 -->
    <div v-once>{{ count }}</div>
    <button @click="handleClick">点击+1</button>

    <hr>
    <!-- v-for的优先级，比v-if要高 -->
    <div class="list" v-for="item in list" :key="item" >{{ item }}</div>
  </div>
</template>
<script lang="ts" setup>
import { shallowRef } from 'vue';
/*
  vue的基础语法：
  1. {{}} 插值语法
  2. 指令
      v-bind 动态绑定一个或多个特性，或一个组件的prop
        1.对象语法
        2.数组语法
        3.表达式
        4.计算属性
        5.方法
      v-on
        绑定事件
      v-html
        可以解析文本，也可以接卸html标签
      v-text
        解析文本
      v-if
        直接注释掉元素，不渲染
      v-show
        通过 display: none来控制显示和隐藏
      v-for
        遍历时添加key 可以提高效率， 切忌与v-if混用
      v-model
        双向绑定
      v-cloak
        隐藏未编译的 Mustache 标签，直到 Vue 实例挂载完成。
      v-pre
        跳过该元素及其子元素的编译过程，直接将原始内容渲染到页面上。
      v-once
        只渲染一次，后续数据更新不会重新渲染该元素。
      v-memo
        缓存模板片段，只有当指定的依赖项发生变化时才重新渲染。


*/
const message = shallowRef('hello vue3')
const isActive = shallowRef(true)
const isFirst = shallowRef(true)
const activeClass = shallowRef('active')
const errorClass = shallowRef(['aaa', 'bbb'])

const count =shallowRef(0)
const handleClick = () => {
  count.value += 1
}

const list = shallowRef([0,1,2,3,4])
</script>
<style>
 .message {
  color: red;
  border: 1px solid #ccc;
 }
 .active {
  width: 200px;
  height: 200px;
  background-color: aqua;
  margin-bottom: 20px;
 }
 .first {
  border-radius: 20px;
 }
 .aaa {
  text-align: center;
  color: red;
  line-height: 200px;
 }
 .list {
  font-size: 24px;
  border: 1px solid red;
 }
</style>